<template>
  <div class="app-container machineContainer">
    <div class="customContainer">
      <!-- 搜索头 -->
      <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" size="small">
        <el-form-item>
          <span style="color: #888;">选择门店：</span>
          <el-select filterable v-model="formInline.store_id" style="width:300px">
            <el-option v-for="item in storeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <span style="color: #888;">选择仓库：</span>
          <el-select v-model="storage_type" style="width:100px">
            <el-option v-for="item in storageList" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="formInline.type">
            <el-option v-for="item in Report_form" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="fetchData">查 询</el-button>
        </el-form-item>
      </el-form>
      <!-- 列表 -->
      <el-table highlight-current-row :data="list" v-loading.body="listLoading" border size="small" @sort-change="sortChange">
        <el-table-column v-if="formInline.house_type==2" key="machine_no" align="center" label="机台号">
          <template slot-scope="scope">
            {{scope.row.area_name}} - {{scope.row.machine_no}}
          </template>
        </el-table-column>
        <el-table-column v-if="formInline.house_type==2" key="machine_name" align="center" label="机台名称" prop="machine_name"></el-table-column>
        <el-table-column align="center" label="礼品图片" width="80">
          <template slot-scope="scope">
            <div v-viewer="options" class="images fit">
              <img :src="scope.row.thumb" :data-source="scope.row.img" class="image" :key="scope.row.img" />
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="一级分类" prop="one_type"></el-table-column>
        <el-table-column align="center" label="二级分类" prop="two_type"></el-table-column>
        <el-table-column align="center" label="礼品名称" prop="gift_name"></el-table-column>
        <el-table-column align="center" label="神采礼品编号" prop="no_obsolete"></el-table-column>
        <el-table-column align="center" label="新礼品编号" prop="gift_id"></el-table-column>
        <el-table-column align="center" label="礼品数量" prop="num"></el-table-column>
        <el-table-column align="center" label="库存单价" prop="money_cost"></el-table-column>
        <el-table-column align="center" label="库存金额" prop="in_house_money"></el-table-column>
        <el-table-column align="center" label="到货天数" prop="in_house_day" sortable></el-table-column>
        <el-table-column align="center" v-if="warningDay" label="预警天数" prop="warning_day"></el-table-column>
      </el-table>
    </div>

    <!-- 自定义底部 -->
    <div class="bottom_box">
      <el-pagination class="pull-left" background @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="20"
        layout="prev, pager, next, jumper" :total="totalDataNumber"></el-pagination>
      <p style="text-align:center;font-size: 14px;color: rgb(96, 98, 102);float:right">
        数量合计：{{totalNum||0}}个 金额合计：{{(totalAmount||0)|keepTwoNum}}元
      </p>
    </div>
  </div>
</template>

<script>
import { getList, getPage, getStoreList } from '@/api/storage_control/gift_bad_details';
export default {
  data() {
    return {
      listLoading: false,
      list: null,
      currentPage: 1,
      storeList: null,
      storageList: [
        { name: '常规仓', id: 1 },
        { name: '机台仓', id: 2 }
      ],
      totalDataNumber: 0,
      totalNum: 0,
      totalAmount: 0,
      storage_type: 1,
      warningDay: true,
      store_id: '',
      options: {
        //预览图配置
        toolbar: true,
        url: 'data-source'
      },
      Report_form: [
        { name: '礼品坏库存表', id: 0 },
        { name: '礼品坏库存预警表', id: 1 }
      ],
      formInline: {
        sort: 'in_house_day',
        sort_by: 'asc',
        type: 1,
        house_type: 1,
        store_id: ''
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      //当进入组件之前，执行 beforRouteEnter 路由钩子函数 ,//参数vm就是当前组件的实例。
      if (!vm.storeList) {
        vm.getStore();
      }
    });
  },
  methods: {
    getStore() {
      getStoreList({
        category_id: 346
      }).then(response => {
        this.storeList = response;
        let data = response.filter(res => res.id == this.$store.getters.optionId);
        if (data.length > 0) {
          this.formInline.store_id = data[0].id;
        } else {
          if (this.storeList.length > 0) {
            this.formInline.store_id = this.storeList[0].id;
          }
        }
      });
    },
    sortChange(column, prop, order) {
      this.listLoading = true;
      this.formInline.sort = column.prop ? column.prop : 'in_house_day';
      this.formInline.sort_by = column.order == 'descending' ? 'desc' : 'asc';
      this.handleCurrentChange(this.currentPage);
    },
    // 列表获取
    fetchData() {
      this.listLoading = true;
      if (this.formInline.type == 1) {
        this.warningDay = true;
      } else {
        this.warningDay = false;
      }
      this.currentPage = 1;
      this.formInline.house_type = this.storage_type;
      getPage(this.formInline)
        .then(response => {
          this.totalDataNumber = response.page * 20;
          this.totalNum = response.num;
          this.totalAmount = response.money;
          getList(this.formInline).then(response => {
            response.forEach(val => {
              val.in_house_money = (val.money_cost * val.num).toFixed(2) * 1;
              val.in_house_day *= 1;
            });
            this.list = response;
            this.listLoading = false;
          });
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    // 分页
    handleCurrentChange(val) {
      this.listLoading = true;
      getList(this.formInline, val).then(response => {
        response.forEach(val => {
          val.in_house_money = (val.money_cost * val.num).toFixed(2) * 1;
          val.in_house_day *= 1;
        });
        this.list = response;
        this.listLoading = false;
      });
    }
  }
};
</script>